<script>
	import Vue from 'vue'

	let _this
	export default {
		onLaunch: function() {
			_this = this
			console.log('App Launch')
			// #ifdef APP-PLUS
			// 锁定横屏  
			// plus.screen.lockOrientation("landscape-primary");  
			// 锁定竖屏  
			plus.screen.lockOrientation("portrait-primary");
			// #endif
			//获取屏幕高度及比例
			var winInfo = uni.getSystemInfo({
				success: function(res) {
					let height = res.windowHeight;
					let width = res.windowWidth;
					uni.setStorageSync('height', height);
					uni.setStorageSync('width', width);
					uni.setStorageSync("appVersionCode", res.appVersionCode)
					console.log(res)

					let version = 0;
					let deviceBrand = res.deviceBrand //品牌
					let deviceModel = res.deviceModel //型号
					let devicePixelRatio = res.devicePixelRatio //屏幕密度
					let osName = res.osName //系统类型
					let system = res.system //系统版本
					let screenWidth = res.screenWidth //系统类型
					let screenHeight = res.screenHeight //系统版本
					// #ifdef APP-PLUS
					version = res.appWgtVersion
					// #endif
					// #ifndef APP-PLUS
					version = res.appVersion
					// #endif

					console.log("设备品牌  ", deviceBrand, devicePixelRatio, screenWidth, screenHeight)
					uni.setStorageSync("appVersion", res.version)
					uni.setStorageSync("deviceBrand", deviceBrand)
					try {
						uni.setStorageSync("screenWidth", (screenWidth * devicePixelRatio).toFixed(0))
						uni.setStorageSync("screenHeight", (screenHeight * devicePixelRatio).toFixed(0))
					} catch (e) {
						//TODO handle the exception
					}

				}
			});

			this.onRefreshToken()
			this.autoUpdate()
			this.initPush()

		},
		onShow: function() {
			_this = this
			console.log('App Show')
			// #ifdef APP-PLUS
			setTimeout(function() {
				//有时候可能会获取不到所以延时处理
				let str = plus.runtime.arguments
				console.log(str)
				if (str != null && str != undefined) {
					if (str.indexOf("%22")) { //如果包含url的编码符号“的话则认为是url编码需要进行url解码后使用
						str = decodeURIComponent(str)
					}
					str = _this.replaceAll(str, "mewAI://", "")
					str = _this.replaceAll(str, "mewai://", "")
					if (str.indexOf("\\\"") >= 0) { //判断有没有字符串的\转义有的话则进行处理(从Android网页端会有这个情况)
						str = _this.replaceAll(str, "\"", "")
						str = _this.replaceAll(str, "\\", "\"")
					}

					let info = str
					//由于网站打开的特殊性可能会进行两次对象转换,直到转换成对象为止
					if (typeof info != 'object') {
						info = JSON.parse(info)
					}
					if (typeof info != 'object') {
						info = JSON.parse(info)
					}
					//清除参数
					plus.runtime.arguments = null
					_this.dealAction(info)
				}
			}, 2500)

			// #endif
		},
		onHide: function() {
			console.log('App Hide')
		},
		beforeDestroy() {
			uni.$off() //移除所有的监听
		},
		methods: {
			onRefreshToken: function() {
				let _this = this;
				// uni.getStorage({
				// 	key: 'authUser',
				// 	success: function(res) {
				// 		console.log(res.data);
				// 	}
				// });
				// console.log(JSON.stringify(Vue.prototype.authUser))
				// this.sendRequest({
				// 	url: "api/auth/user/refreshToken",
				// 	data: {
				// 		userId: _this.authUser.id,
				// 		token: _this.authUser.token,
				// 	},
				// 	page: _this,
				// 	success: function(res) {
				// 		_this.shop = res.data;
				// 		//默认选择第一个分类的商品
				// 		if (_this.shop.goodsTypeList != null && _this.shop.goodsTypeList.length > 0) {
				// 			_this.getGoodsByType(_this.shop.goodsTypeList[0].id)
				// 		}
				// 	},
				// 	fail: function(e) {}
				// })
			},
			autoUpdate() {
				let that = this;
				// 获取小程序更新机制兼容 
				if (uni.canIUse('getUpdateManager')) {
					const updateManager = uni.getUpdateManager()
					// 检查是否有新版本发布
					updateManager.onCheckForUpdate(function(res) {
						if (res.hasUpdate) {
							//小程序有新版本，则静默下载新版本，做好更新准备
							updateManager.onUpdateReady(function() {
								uni.showModal({
									title: '更新提示',
									content: '新版本已经准备好，是否重启应用？',
									success: function(res) {
										if (res.confirm) {
											//新的版本已经下载好，调用 applyUpdate 应用新版本并重启
											updateManager.applyUpdate()
										} else if (res.cancel) {
											//如果需要强制更新，则给出二次弹窗，如果不需要，则这里的代码都可以删掉了
											uni.showModal({
												title: '温馨提示',
												content: '我们已经做了新的优化，请及时更新~',
												showCancel: false, //隐藏取消按钮，也可显示，取消会走res.cancel，然后从新开始提示
												success: function(res) {
													//第二次提示后，强制更新           
													if (res.confirm) {
														// 新的版本已经下载好，调用 applyUpdate 应用新版本并重启
														updateManager.applyUpdate()
													}
												}
											})
										}
									}
								})
							})
							// 新的版本下载失败
							updateManager.onUpdateFailed(function() {
								uni.showModal({
									title: '温馨提示',
									content: '新版本已经上线，请您删除当前小程序，重新搜索打开',
								})
							})
						}
					})
				} else {
					// 提示用户在最新版本的客户端上体验
					uni.showModal({
						title: '温馨提示',
						content: '当前微信版本过低，可能无法使用扫码充电功能，请升级到最新版本后重试。'
					})
				}
			},
			initPush() {
				let _this = this;
				uni.getPushClientId({
					success: (res) => {
						console.log(res.cid);
						uni.setStorageSync("clientId", res.cid)


					},
					fail(err) {
						// console.log(err)
					}
				})

				uni.onPushMessage((res) => {
					let data = res.data;

					// #ifdef APP-PLUS
					//app需要单独处理
					data = data.payload
					// #endif


					if (res.type == 'click') { //点击通知
						console.log("点击了通知")
						console.log(data)
						uni.navigateTo({
							url: "/pages/message/messageDetail?id=" + data.messageId
						})
					} else if (res.type == "receive") { //收到消息

						console.log("接收到透传消息  ")

						_this.setMessageReceive(data.messageId)
						// #ifdef APP-PLUS
						if (data.notification) {
							uni.createPushMessage({
								title: data.title,
								content: data.content,
								payload: data
							})
						}
						// #endif

						console.log(data)
						if (data.action == 2) { //刷新未读消息
							console.log("发送刷新页面事件")
							_this.initUnReadMessageCount()
							uni.$emit('refreshMessageList', {
								msg: '页面更新'
							})
						}
					}

				})
			},
			dealAction(info) {

				if (info.operate == 1) {
					// this.onClickLottery()
				} else if (info.operate == 2) { //跳转图片详情
					uni.navigateTo({
						url: "/pages/task/taskDetail?id=" + info.id + "&origin=1"
					})
				}
			},
			replaceAll(input, toReplace, replaceWith) {
				//替换所有字符
				while (input.indexOf(toReplace) > -1) {
					input = input.replace(toReplace, replaceWith)
				}
				return input
			}



		}

	}
</script>


<style lang="scss">
	/*每个页面公共css */
	/* uni.css - 通用组件、模板样式库，可以当作一套ui库应用 */
	@import 'common/uni.css';
	@import "uview-ui/index.scss";

	uni-modal {
		z-index: 19999 !important;
	}

	/*
	 * 一些通用样式
	 */
	.pd10 {
		padding: 10rpx;
	}

	.pd15 {
		padding: 15rpx;
	}

	.pd-l-10 {
		padding-left: 10rpx;
	}

	.pd-r-10 {
		padding-right: 10rpx;
	}

	.pd-l-20 {
		padding-left: 20rpx;
	}

	.pd-l-25 {
		padding-left: 25rpx;
	}

	.pd-l-30 {
		padding-left: 20rpx;
	}

	.pd-l-50 {
		padding-left: 50rpx;
	}

	.pd-r-20 {
		padding-right: 20rpx;
	}

	.pd-r-30 {
		padding-right: 30rpx;
	}

	.pd-r-50 {
		padding-right: 50rpx;
	}

	.pd-lr5 {
		padding-left: 5rpx;
		padding-right: 5rpx;
	}

	.pd-lr10 {
		padding-left: 10rpx;
		padding-right: 10rpx;
	}

	.pd-lr15 {
		padding-left: 15rpx;
		padding-right: 15rpx;
	}

	.pd-lr20 {
		padding-left: 20rpx;
		padding-right: 20rpx;
	}


	.pd-lr25 {
		padding-left: 25rpx;
		padding-right: 25rpx;
	}

	.pd-lr30 {
		padding-left: 30rpx;
		padding-right: 30rpx;
	}

	.pd-lr50 {
		padding-left: 50rpx;
		padding-right: 50rpx;
	}

	.pd-lr80 {
		padding-left: 80rpx;
		padding-right: 80rpx;
	}

	.pd-tb2 {
		padding-top: 2rpx;
		padding-bottom: 2rpx;
	}

	.pd-tb5 {
		padding-top: 5rpx;
		padding-bottom: 5rpx;
	}

	.pd-tb10 {
		padding-top: 10rpx;
		padding-bottom: 10rpx;
	}

	.pd-tb15 {
		padding-top: 15rpx;
		padding-bottom: 15rpx;
	}

	.pd-tb25 {
		padding-top: 25rpx;
		padding-bottom: 25rpx;
	}

	.pd-tb40 {
		padding-top: 40rpx;
		padding-bottom: 40rpx;
	}

	.pd-tb50 {
		padding-top: 50rpx;
		padding-bottom: 50rpx;
	}

	.pd-tb60 {
		padding-top: 60rpx;
		padding-bottom: 60rpx;
	}

	.pd-b75 {
		padding-bottom: 75rpx;
	}

	.pd-b10 {
		padding-bottom: 10rpx;
	}

	.pd-b20 {
		padding-bottom: 20rpx;
	}

	.pd-b40 {
		padding-bottom: 40rpx;
	}

	.pd-t10 {
		padding-top: 10rpx;
	}

	.pd-t20 {
		padding-top: 20rpx;
	}

	.pd-t30 {
		padding-top: 30rpx;
	}

	.pd-t40 {
		padding-top: 40rpx;
	}

	/*
	 * 边框
	 */
	.border-gray {
		border: #e6e6e6 1rpx solid;
		border-radius: 2rpx;
	}

	.border-gray-1 {
		border: #eee 1rpx solid;
		border-radius: 2rpx;
	}

	.border-gray-2 {
		border: #d2d2d2 1rpx solid;
		border-radius: 2rpx;
	}

	.border-gray-3 {
		border: #c2c2c2 1rpx solid;
		border-radius: 2rpx;
	}

	.border-gray-4 {
		border: #999 1rpx solid;
		border-radius: 2rpx;
	}

	/*
	 * margin-top
	 */
	.mg-t-5 {
		margin-top: 5rpx;
	}

	.mg-t-10 {
		margin-top: 10rpx;
	}

	.mg-t-20 {
		margin-top: 20rpx;
	}

	.mg-t-30 {
		margin-top: 30rpx;
	}

	.mg-t-40 {
		margin-top: 40rpx;
	}

	.mg-t-50 {
		margin-top: 50rpx;
	}

	.mg-t-55 {
		margin-top: 55rpx;
	}

	.mg-t-60 {
		margin-top: 60rpx;
	}

	.mg-t-65 {
		margin-top: 65rpx;
	}

	/*
	 * margin-left
	 */
	.mg-l-5 {
		margin-left: 5rpx;
	}

	.mg-l-10 {
		margin-left: 10rpx;
	}

	.mg-l-20 {
		margin-left: 20rpx;
	}

	.mg-l-40 {
		margin-left: 40rpx;
	}

	.mg-l-50 {
		margin-left: 50rpx;
	}

	.mg-l-55 {
		margin-left: 55rpx;
	}

	.mg-l-60 {
		margin-left: 60rpx;
	}

	.mg-l-65 {
		margin-left: 65rpx;
	}

	/*
	 * margin-right
	 */
	.mg-r-5 {
		margin-right: 5rpx;
	}

	.mg-r-10 {
		margin-right: 10rpx;
	}

	.mg-r-20 {
		margin-right: 20rpx;
	}

	.mg-r-40 {
		margin-right: 40rpx;
	}

	.mg-r-50 {
		margin-right: 50rpx;
	}

	.mg-r-55 {
		margin-right: 55rpx;
	}

	.mg-r-60 {
		margin-right: 60rpx;
	}

	.mg-r-65 {
		margin-right: 65rpx;
	}

	/*
	 * margin-bottom
	 */
	.mg-b-10 {
		margin-bottom: 10rpx;
	}

	.mg-b-20 {
		margin-bottom: 20rpx;
	}

	.mg-b-40 {
		margin-bottom: 40rpx;
	}

	.mg-b-50 {
		margin-bottom: 50rpx;
	}

	.mg-b-55 {
		margin-bottom: 55rpx;
	}

	.mg-b-60 {
		margin-bottom: 60rpx;
	}

	.mg-b-65 {
		margin-bottom: 65rpx;
	}

	/*
	 * margin-lr
	 */
	.mg-lr-10 {
		margin-left: 10rpx;
		margin-right: 10rpx;
	}

	.mg-lr-20 {
		margin-left: 20rpx;
		margin-right: 20rpx;
	}

	.mg-lr-50 {
		margin-left: 20rpx;
		margin-right: 20rpx;
	}

	/** HTML及CSS常用颜色英文词汇
	黑色	银色	灰色	白色	茶色	红色	紫色	紫红
	black	silver	gray	white	maroon	red	    purple	fuchsia
	#000000	#C0C0C0	#808080	#FFFFFF	#800000	#FF0000	#800080	#FF00FF
	绿色	亮绿	橄榄	黄色	深蓝	蓝色	青色	浅绿
	green	lime	olive	yellow	navy	blue	teal	aqua
	#008000	#00FF00	#808000	#FFFF00	#000080	#0000FF	#008080	#00FFFF
	*/

	.text-center {
		text-align: center;
	}

	.text-right {
		text-align: right;
	}

	.float-r {
		float: right;
	}

	.float-l {
		float: left;
	}

	/* 子元素高度保持一致 */
	.flex-row {
		display: flex;
		flex-direction: row;
	}

	/********************************* boven 样式 end *********************************/


	/**主题色*/
	.color-main-color {
		color: #3C8D2E;
	}

	/**通用字体颜色*/
	.color-text-title {
		color: #000;
	}

	/**副标题*/
	.color-text-title-aux {
		color: #484848;
	}

	/**主题内容文本色*/
	.color-text-main-body {
		color: #666666;
	}

	/**副文本颜色*/
	.color-text-explain {
		color: #999999;
	}

	/**提示色*/
	.color-text-auxiliary {
		color: #cccccc;
	}

	/**提示色*/
	.color-text-white {
		color: #ffffff;
	}

	/**通用背景色*/
	.color-bg {
		color: #f5f6f7;
	}

	/**item栏颜色*/
	.color-cell {
		color: #ffffff;
	}

	/**通用背景色*/
	.color-orange {
		color: #fdb02a;
	}

	/**item栏颜色*/
	.color-red {
		color: #ff5040;
	}

	/**item栏颜色*/
	.color-blue {
		color: #3D4FB3;
	}

	/**通用背景色*/
	.bg-white {
		background: #ffffff;
	}

	.bg-black {
		background: #000000;
	}

	.bg-black-light {
		background: #232726;
	}

	/* 页面统一背景  */
	.bg-common {
		background-color: #f4f5f7;
	}

	.bg-dark {
		background-color: #232726;
	}

	.bg-gray {
		background-color: #d4d4d4;
	}

	.bg-gray-dark {
		background-color: #919191;
	}

	.bg-gray-light {
		background-color: #f2f2f2;
	}

	.bg-gray-pale {
		background-color: #FBFBFB;
	}


	.bg-green {
		background-color: #3C8D2E;
		background: #3C8D2E;
	}

	.bg-blue {
		background-color: #00b4f7;
	}

	.bg-blue-light {
		background-color: #ddf2ff;
	}

	.bg-red {
		background-color: #ff2821;
	}

	.bg-red-thick {
		background-color: #930303;
	}

	.bg-orange {
		background-color: #ffb907;
	}

	.bg-orange-light {
		background-color: rgba(255, 185, 7, 0.2);
	}

	.bg-yellow {
		background-color: #ffc800;
	}


	/* 页面统一背景  */
	.bg-main {
		background-color: #3C8D2E;
	}

	.bg-shadow-gray {
		box-shadow: 0 0 10px #cccccc;
	}

	.bg-shadow-gray-light {
		box-shadow: 0 0 5px #d6d6d6;
	}

	.bg-shadow-gray-light2 {
		box-shadow: 0 0 5px #ebebeb;
	}

	.bg-shadow-gray-bottom {
		box-shadow: 0 3px 3px #dadada;
	}

	.bg-shadow-gray-bottom-long {
		box-shadow: 0 5px 5px #eeeeee;
	}

	.transparent50 {
		opacity: 0.5
	}

	.transparent80 {
		opacity: 0.8
	}

	.button-main-color {
		background-color: #3C8D2E;
	}

	.button-main-color:active {
		background-color: rgb(42, 121, 173);
		color: white;
	}

	.button-main-color:focus {
		background-color: rgb(42, 121, 173);
		color: white;
	}

	/********************************* Vant样式补充(supplement) start *********************************/

	/* 页面 vue模板 */
	.common-body {
		position: relative;
		width: 100%;
		height: 100%;
	}

	.common-content {
		position: relative;
		display: flex;
		width: 100%;
		height: 100%;
		padding-top: 46rpx;
		box-sizing: border-box;
	}

	/* 纵向排列 */
	/**边框限制不会因为外边距和内边距而撑大宽度和长度*/
	.box-limit {
		box-sizing: border-box
	}

	.ver {
		display: flex;
		flex-direction: column;
		box-sizing: border-box
	}

	.ver-center {
		align-items: center;
	}

	.flex1 {
		flex: 1;
	}

	/* 横向排列 */

	.hor {
		display: flex;
		box-sizing: border-box
	}

	/*横向布局自动换行*/
	.hor_wrap {
		flex-wrap: wrap;
		justify-content: left;
		display: flex;
		align-items: center;
	}

	.hor_wrap_center {
		flex-wrap: wrap;
		justify-content: center;
	}

	.hor-center {
		justify-content: center;
	}

	.hor-right {
		margin-left: auto;
	}

	/* 页面统一背景  */
	.match-width {
		width: 100%;
	}

	.match-width90 {
		width: 90%;
	}

	.match-width95 {
		width: 95%;
	}

	.match-width70 {
		width: 70%;
	}

	.match-width90 {
		width: 90%;
	}

	.match-height {
		height: 100%;
	}

	/* 页面底部按钮
	 * 当页面内容高度小于屏幕尺寸，按钮会保持在底部
	 * 反之内容高于屏幕尺寸，按钮会保持在内容下面
	 * 父元素需要设置 position: relative
	 */
	.button-bottom {
		padding: 15rpx 15rpx;
		position: absolute;
		bottom: 0;
		left: 0;
		width: calc(100% - 30rpx);
	}

	.divider-hor {
		background: #f9f9f9;
		height: 1rpx;
		width: 100%;
	}

	.divider-ver {
		background: #f9f9f9;
		height: 100%;
		width: 1rpx;
	}

	.divider-bottom {
		background-repeat: no-repeat;
		border-bottom: 1rpx solid #f9f9f9;
	}

	/* 背景图形 */
	.corner100 {
		border-radius: 100rpx;
		background-repeat: no-repeat;
	}

	.corner1000 {
		border-radius: 1000rpx;
		background-repeat: no-repeat;
	}

	.corner20 {
		border-radius: 20rpx;
		background-repeat: no-repeat;
	}

	.corner15 {
		border-radius: 15rpx;
		background-repeat: no-repeat;
	}

	.corner10 {
		border-radius: 10rpx;
		background-repeat: no-repeat;
	}

	.corner10-right {
		border-radius: 0 10rpx 10rpx 0rpx;
		background-repeat: no-repeat;
	}

	.corner5 {
		border-radius: 5rpx;
		background-repeat: no-repeat;
	}

	.corner10-l {
		border-radius: 10rpx 0 0 10rpx;
		background-repeat: no-repeat;
	}

	.corner10-lt {
		border-radius: 10rpx 0 0 0;
		background-repeat: no-repeat;
	}

	.corner10-lr {
		border-radius: 10rpx 0 10rpx 0;
		background-repeat: no-repeat;
	}

	.corner10-rt {
		border-radius: 0 10rpx 0 0;
		background-repeat: no-repeat;
	}

	.corner10-b {
		border-radius: 0 0 10rpx 10rpx;
		background-repeat: no-repeat;
	}

	.corner10-t {
		border-radius: 10rpx 10rpx 0 0;
		background-repeat: no-repeat;
	}

	.corner20-l {
		border-radius: 20rpx 0 0 20rpx;
		background-repeat: no-repeat;
	}

	.corner20-lt {
		border-radius: 20rpx 0 0 0;
		background-repeat: no-repeat;
	}

	.corner20-rt {
		border-radius: 0 20rpx 0 0;
		background-repeat: no-repeat;
	}

	.corner20-lr {
		border-radius: 20rpx 0 20rpx 0;
		background-repeat: no-repeat;
	}

	.corner20-t {
		border-radius: 20rpx 20rpx 0 0;
		background-repeat: no-repeat;
	}

	.corner-stroke-trans-thick {
		border: 10rpx solid hsla(201, 45%, 66%, 0);
		background-clip: padding-box;
		/*从padding开始往外面裁剪背景*/
		border-radius: 10rpx;
	}

	.corner-stroke-blue-thick {
		border: 10rpx solid #279ae7;
		background-clip: padding-box;
		/*从padding开始往外面裁剪背景*/
		border-radius: 10rpx;
	}

	.corner-stroke-blue-thin {
		border: 5rpx solid hsla(204, 80%, 53%, 0.5);
		background-clip: padding-box;
		/*从padding开始往外面裁剪背景*/
		border-radius: 100rpx;
	}

	.corner-stroke-blue-thin-10 {
		border: 5rpx solid hsla(204, 80%, 53%, 0.5);
		background-clip: padding-box;
		/*从padding开始往外面裁剪背景*/
		border-radius: 10rpx;
	}

	.corner-stroke-blue-thick-10 {
		border: 10rpx solid hsla(204, 76%, 53%, 0.5);
		background-clip: padding-box;
		/*从padding开始往外面裁剪背景*/
		border-radius: 10rpx;
	}

	.corner-stroke-blue-light-thick {
		border: 10rpx solid hsla(199, 21%, 89%, 0.5);
		background-clip: padding-box;
		/*从padding开始往外面裁剪背景*/
		border-radius: 10rpx;
	}

	.corner-stroke-main-color5 {
		border-style: solid;
		border-width: 1rpx;
		border-radius: 5rpx;
		border-color: #3C8D2E;
		background-repeat: no-repeat;
	}

	.corner-stroke-main-color10 {
		border-style: solid;
		border-width: 1rpx;
		border-radius: 10rpx;
		border-color: #3C8D2E;
		background-repeat: no-repeat;
	}

	.corner-stroke-main-color10-thick {
		border-style: solid;
		border-width: 1rpx;
		border-radius: 10rpx;
		background-repeat: no-repeat;

		border: 5rpx solid hsla(204, 75%, 53%, 0.5);
		background-clip: padding-box;
	}

	.corner-stroke-main-color100 {
		border-style: solid;
		border-width: 1rpx;
		border-radius: 100rpx;
		border-color: #3C8D2E;
		background-repeat: no-repeat;
	}

	.corner-stroke-orange {
		border-style: solid;
		border-width: 1rpx;
		border-radius: 10rpx;
		border-color: #ffaa00;
		background-repeat: no-repeat;
	}

	.corner-stroke-red {
		border-style: solid;
		border-width: 1rpx;
		border-radius: 5rpx;
		border-color: #ff2c18;
		background-repeat: no-repeat;
	}

	.corner-stroke-gray {
		border-style: solid;
		border-width: 1px;
		border-radius: 5rpx;
		border-color: #F4F5F7;
		background-repeat: no-repeat;
	}


	.corner-stroke-gray10 {
		border-style: solid;
		border-width: 1px;
		border-radius: 10rpx;
		border-color: #F4F5F7;
		background-repeat: no-repeat;
	}

	.corner-stroke-gray20 {
		border-style: solid;
		border-width: 1px;
		border-radius: 20rpx;
		border-color: #F4F5F7;
		background-repeat: no-repeat;
	}

	.corner-stroke-gray100 {
		border-style: solid;
		border-width: 1px;
		border-radius: 100rpx;
		border-color: #F4F5F7;
		background-repeat: no-repeat;
	}

	.corner-stroke-white100 {
		border-style: solid;
		border-width: 1px;
		border-radius: 100rpx;
		border-color: #ffffff;
		background-repeat: no-repeat;
	}

	.corner-stroke-trans {
		border-style: solid;
		border-width: 0px;
		border-radius: 0rpx;
		border-color: #ffffff;
		background-repeat: no-repeat;
	}

	.corner-stroke-black10 {
		border-style: solid;
		border-width: 1px;
		border-radius: 10rpx;
		border-color: #000000;
		background-repeat: no-repeat;
	}

	.corner-stroke-black20 {
		border-style: solid;
		border-width: 1px;
		border-radius: 20rpx;
		border-color: #000000;
		background-repeat: no-repeat;
	}

	.oval-stroke-white {
		border-style: solid;
		border-width: 1px;
		border-radius: 50%;
		border-color: #ffffff;
		background-repeat: no-repeat;
	}

	.oval-stroke-main-color {
		border-style: solid;
		border-width: 1px;
		border-radius: 50%;
		border-color: #3C8D2E;
		background-repeat: no-repeat;
	}

	.oval-stroke-blue-thick {
		border: 10rpx solid hsla(201, 45%, 66%, 0.5);
		background-clip: padding-box;
		/*从padding开始往外面裁剪背景*/
		border-radius: 50%;
	}

	.corner-stroke-white-thin-10 {
		border: 5rpx solid hsla(-1, 0%, 100%, 0.5);
		background-clip: padding-box;
		/*从padding开始往外面裁剪背景*/
		border-radius: 10rpx;
	}


	.ovalIcon {
		width: 34rpx;
		height: 34rpx;
		border-radius: 50%;
	}

	.oval {
		border-radius: 50%;
	}

	.userinfo-avatar {
		width: 100rpx;
		height: 100rpx;
		border-radius: 50%;
		background-size: cover;
		background-color: white;
	}

	.icon-normal {
		width: 80rpx;
		height: 80rpx;
	}

	.icon-little {
		width: 40rpx;
		height: 40rpx;
	}

	.font10 {
		font-size: 18rpx;
	}

	.font12 {
		font-size: 22rpx;
	}

	.font14 {
		font-size: 26rpx;
	}

	.font16 {
		font-size: 30rpx;
	}

	.font18 {
		font-size: 36rpx;
	}

	.font20 {
		font-size: 42rpx;
	}

	.font24 {
		font-size: 48rpx;
	}

	.font30 {
		font-size: 68rpx;
	}

	.font-color-white {
		color: #ffffff
	}

	.font-color-white-light {
		color: #ffffff;
		opacity: 0.5
	}

	.font-color-red {
		color: #F16B6F
	}

	.font-color-blue {
		color: #00B4F7
	}

	.font-color-blue-light {
		color: #e2e2f7
	}

	.font-color-green {
		color: #3C8D2E
	}

	.font-color-main {
		color: #3C8D2E
	}

	.font-color-orange {
		color: #ffaa00
	}

	.font-color-yellow {
		color: #fff29e
	}

	.font-color-orange-light {
		color: #FDD692
	}

	.font-color-orange2 {
		color: #FF6B00
	}

	.font-text-color-black {
		color: #000000
	}

	.font-text-color-main-title {
		color: #252525
	}

	.font-text-color-main_body {
		color: #666666
	}

	.font-text-color-explain {
		color: #999999
	}

	.font-text-color-auxiliary {
		color: #cccccc
	}

	.stroke-text-white {
		text-shadow: 0px 0px 2px white;
		/* 设置水平和垂直阴影，以及模糊距离，白色表示阴影颜色 */
	}

	.line1 {
		display: -webkit-box;
		text-overflow: ellipsis;
		-webkit-line-clamp: 1;
		/*! autoprefixer: off */
		-webkit-box-orient: vertical;
		/* autoprefixer: on */
		overflow: hidden;
	}

	.line1-dot {
		white-space: nowrap;
		-webkit-line-clamp: 1;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.line2 {
		display: -webkit-box;
		text-overflow: ellipsis;
		-webkit-line-clamp: 2;
		/*! autoprefixer: off */
		-webkit-box-orient: vertical;
		/* autoprefixer: on */
		overflow: hidden;
	}

	.line3 {
		display: -webkit-box;
		text-overflow: ellipsis;
		-webkit-line-clamp: 3;
		/*! autoprefixer: off */
		-webkit-box-orient: vertical;
		/* autoprefixer: on */
		overflow: hidden;
	}

	.line10 {
		display: -webkit-box;
		text-overflow: ellipsis;
		-webkit-line-clamp: 10;
		/*! autoprefixer: off */
		-webkit-box-orient: vertical;
		/* autoprefixer: on */
		overflow: hidden;
	}

	::-webkit-scrollbar {
		display: none;
		width: 0 !important;
		height: 0 !important;
		-webkit-appearance: none;
		background: transparent;
	}

	.font_shade {
		background: -webkit-linear-gradient(left, #FA5C7E, #DA47FA, #01BFA3, #2cd589, #e742c4);
		color: transparent;
		-webkit-background-clip: text;
		background-size: 200% 100%;
		animation: masked-animation 3s infinite linear;
	}

	.font_shade_blue {
		background: -webkit-linear-gradient(left, #64c4e7, #a961d5, #5959d5, #a961d5, #64c4e7, );
		color: transparent;
		-webkit-background-clip: text;
	}

	/////////////css的符号
	.icon_close {
		width: 50rpx;
		height: 50rpx;
		background: #000000;
		color: #ffffff;
		position: relative;
	}

	.icon_close::before {
		content: '';
		position: absolute;
		left: 50%;
		top: 50%;
		width: 60%;
		transform: translate(-50%, -50%) rotate(45deg);
		border-top: 2px solid;
	}

	.icon_close::after {
		content: '';
		position: absolute;
		left: 50%;
		top: 50%;
		height: 60%;
		transform: translate(-50%, -50%) rotate(45deg);
		border-left: 2px solid;
	}

	.icon_add {
		width: 50rpx;
		height: 50rpx;
		background: #000000;
		color: #ffffff;
		position: relative;
	}

	.icon_add::before {
		content: '';
		position: absolute;
		left: 50%;
		top: 50%;
		width: 60%;
		transform: translate(-50%, -50%);
		border-top: 2px solid;
	}

	.icon_add::after {
		content: '';
		position: absolute;
		left: 50%;
		top: 50%;
		height: 60%;
		transform: translate(-50%, -50%);
		border-left: 2px solid;
	}

	.icon_reduce {
		width: 50rpx;
		height: 50rpx;
		background: #000000;
		color: #ffffff;
		position: relative;
	}

	.icon_reduce::before {
		content: '';
		position: absolute;
		left: 50%;
		top: 50%;
		width: 60%;
		transform: translate(-50%, -50%);
		border-top: 2px solid;
	}

	.gradient-bg {
		/* 设置容器尺寸 - 原理1 */
		/* 背景渐变色 - 原理2 */
		background: linear-gradient(-90deg, #FA5C7E, #DA47FA, #01BFA3);
		/* 背景尺寸 - 原理3 */
		background-size: 200% 200%;
		/* 循环动画 - 原理4 */
		// animation: gradientBG 2s ease infinite;
	}

	.bg-gradient-blue {
		/* 设置容器尺寸 - 原理1 */
		/* 背景渐变色 - 原理2 */
		background: linear-gradient(-90deg, #0000ff, #00aaff, #5555ff);
		/* 背景尺寸 - 原理3 */
		background-size: 200% 200%;
		/* 循环动画 - 原理4 */
		// animation: gradientBG 2s ease infinite;
	}

	@-webkit-keyframes masked-animation {
		0% {
			background-position: 0 0;
		}

		100% {
			background-position: -100% 0;
		}
	}

	.status_bar {
		height: var(--status-bar-height);
		width: 100%;
	}


	.line-xu-gray {
		padding: 1px 0px;

		background-image: linear-gradient(to right, #E5E9E8 35%, rgba(255, 255, 255, 0) 0%);
		/* 35%设置虚线点x轴上的长度 */
		background-position: bottom;
		/* top配置上边框位置的虚线 */
		background-size: 10px 1px;
		/* 第一个参数设置虚线点的间距；第二个参数设置虚线点y轴上的长度 */
		background-repeat: repeat-x;
	}
</style>